<template>
  <div class='category'>

    <div class="ai-box">爱你的话</div>
    <div class="ai">{{this.qinghua}}</div>
    <div class="button-box">
      <div class="button">
        <a-button @click="changeQing" type="primary">点击切换</a-button>
      </div>
    </div>


    <div class="ai-box">骂人的话</div>
    <div class="ai">{{maren}}</div>
    <div class="button-box">
      <div class="button">
        <a-button @click="changeMa" type="primary">点击切换</a-button>
      </div>
    </div>

    <div class="ai-box">适合发朋友圈的话</div>
    <div class="ai">{{peng}}</div>
    <div class="button-box">
      <div class="button">
        <a-button @click="changePeng" type="primary">点击切换</a-button>
      </div>
    </div>

    <a-button v-debounce="debounce">点击</a-button>


  </div>


</template>

<script>

  import BScroll from '@better-scroll/core';
  import Pullup from '@better-scroll/pull-up';
  import BackTop from '../../components/content/backTop/BackTop';
  import {throttle} from '../../common/utils';

  import {backTopMixin} from '../../common/mixin';
  import axios from 'axios';


  BScroll.use(Pullup);

  export default {
    name: 'Category',
    mixins: [backTopMixin],

    data() {
      return {
        qinghua: '',
        maren: '',
        peng: ''

      };
    },
    created() {

      axios({
        url: 'http://lwfcll.top:3000/chp'
      }).then((res) => {
        this.qinghua = res.data;
      });

      axios({
        url: 'http://lwfcll.top:5000/hzh'
      }).then((res) => {
        console.log(333,res)
      });

      axios({
        url: 'http://lwfcll.top:3000/pyq'
      }).then((res) => {
        this.peng = res.data;
      });

      axios({
        url: 'http://lwfcll.top:3000/nmsl'
      }).then((res) => {
        this.maren = res.data;
      });

    },
    mounted() {

      /*var A = function() {};
      A.prototype.n = 1;
      var b = new A();
      A.prototype = {
        n: 2,
        m: 3
      }
      var c = new A();

      console.log(b.n);
      console.log(b.m);

      console.log(c.n);
      console.log(c.m);*/

      // function Person(name) {
      //   this.name = name;
      // }
      //
      // let p = new Person('Tom');
      //
      // console.log(p.__proto__);
      // console.log(Person.__proto__);

      console.log(666);
      console.log(999);
      console.log(333);


    },

    methods: {
      changeQing() {
        axios({
          url: 'http://lwfcll.top:3000/chp'
        }).then((res) => {
          this.qinghua = res.data;
        });
      },

      changeMa() {
        axios({
          url: 'http://lwfcll.top:3000/nmsl'
        }).then((res) => {
          this.maren = res.data;
        });
      },

      changePeng() {
        axios({
          url: 'http://lwfcll.top:3000/pyq'
        }).then((res) => {
          this.peng = res.data;
        });
      },


      debounce: throttle(function () {
        console.log(9999);
      }, 1000)


    },

    components: {
      BackTop
    }
  };
</script>

<style scoped>

  .category {
    height: auto;
    /*background-color: pink;*/
    /*overflow-y: scroll;*/
    overflow: hidden;
  }

  .ai-box {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    margin-top: 20px;
  }

  .ai {
    padding: 15px;
    color: #999999;
    font-size: 16px;

  }

  .button-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .button {
    /*margin-left: 10px;*/
  }

  .content {

  }

</style>
